<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>疫情物资捐助公示</title>
    <script src="/js/mui.min.js"></script>
	<link rel="stylesheet" href="/css/sanzhangtu.css"/>
    <link href="/css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
	<script src="/js/jquery.js"></script>
	<script src="/js/Vue.js"></script>
<!--	<script src="/js/bd.js"></script>-->
</head>
<style type="text/css">
	.clearfix {
		clear: both;
	}

	.mui-title {
		color: white;
	}



	.zhanwei {
		width: 100%;
		height: 44px;
	}

	.bgt {
		background: #333333;
	}

	.xx_date {
		/*background: #CCCCCC;*/
		width: 90%;
		text-align: center;
		margin: 10px auto;
		color: #d1cdcd;
	}

	.xx_list {
		background: white;
		width: 90%;
		margin: 5px auto;
		padding: 15px;
	}

	.xx_li_neir {
		font-size: 16px;
		color: #505050;
		height: auto;

	}

	.xx_li_ti {
		font-size: 18px;
		color: #000;
	}
	.newz{
		/*color:#000000;*/
		font-weight: bold;
		letter-spacing: 5px;
	}
	.mui-bar{
		background: #ec3131;
	}
	.diqu{
		margin-top: 30px !important;
		text-align: center
	}
	.diqu p{
		font-size:16px;
		letter-spacing: 3px;
	}
	.mui-title{
		font-size: 20px;
		margin-top: -6px !important;

	}
	/*时钟日期进入动画*/
	/*.sj{*/
	/*	animation:jb 1.5s;*/
	/*}*/
	/*@keyframes jb{*/
	/*	from{opacity:0}*/
	/*	to{opacity:1}*/
	/*}*/
	/*时钟:动画*/
	.s_s{
		animation:shanshuo 1s ;
		animation-iteration-count:infinite;
	}
	@keyframes shanshuo
	{
		from {opacity: 0;}
		to {opacity: 1;}
	}
	.sj{
		/*display: none;*/
		color: #fff;
		font-size: 13px;
		margin-left: 31%;
		margin-top: 7.3%;
		/*font-family: monospace;*/
		/*font-weight: bold;*/
		opacity: 0;
	}
	.sj span{
		margin-left:-3px;
	}
	.fff{
		margin-right:-6px !important;
	}
	.qt{
		margin-top: 10px;
	}
	.qt p{
		color:red;
	}
	.zjj{
		text-align: center;
		color:#000000;
		background: #fff;
		padding: 10px 0px 10px 0px;
		margin: 0px 20px 0px 20px;
	}
	.zjj p{
		color:#505050;
		letter-spacing: 3px;
	}
	.newimg{
		width: 100%;
		margin-top: 40px;
	}
	.mui-badge{
		background:yellow !important;
		color: red !important;
	}
	.newdd{
		color:#fff !important;
		border-left:solid 1px #fff ;
	}
</style>
<body>
<script>mui.init()</script>
<div id="app" v-clock="">
	<header class="my-bar mui-bar mui-bar-nav">
<!--		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
		<h1 class="mui-title newz">疫情物资捐助管理系统
		</h1>
		<div class="sj">
				<span class="fff" id="yer"></span>
				年
				<span class="fff" id="my"></span>
				月
				<span class="fff" id="t"></span>
				日&nbsp;
			<span id="hhh"></span>
			<span class="s_s">:</span>
			<span id="mmm"></span>
			<span class="s_s">:</span>
			<span id="sss"></span>
		</div>
<!--		<a href="/home/locate" class="mui-btn mui-btn-danger mui-pull-right dingwei">-->
<!--			<span class="mui-icon mui-icon-location"></span></a>-->
	</header>
	<div style="height: 20px;"></div>
		<img class="newimg" src="/images/logoo.jpg" />

	<div class="diqu zjj">
		<p style="color:#000">{{name}} 受捐公示</p>

	</div>
	<div class="diqu qt">
		<p>-共计受捐{{gj_sj()}}次-</p>

	</div>
	<div class="zjj">
		<p>金额：{{zjsum}}元</p>
		<p>物品：{{wzsum}}批次</p>
	</div>
	<div class="diqu">
		<p>爱心捐助名单</p>

	</div>

	<!--消息体显示结构-->

<!--捐款目录表-->
	<div v-for="(item,k) in list" :key="k" class="xx_list">
		<p class="xx_date">{{sj_nyrhms(item.k_time)}}</p>
		<!--({{i.region_name}})-->
		<p v-if="item.style==0" class="xx_li_ti">{{item.name}},捐助资金:</p>
		<p v-if="item.style==1" class="xx_li_ti">{{item.name}},捐助物品:</p>
		<p v-if="item.style==2" class="xx_li_ti">{{item.name}},捐助资金和物品:</p>
		<!--尊敬的 &lt;One上大街&gt;用户您好：-->
		<textarea v-if="item.style==0" class="xx_li_neir" readonly
				  style="overflow:hidden; resize:none;">
			{{item.danjia}}元
         </textarea>
		<textarea v-if="item.style==1" class="xx_li_neir" readonly
				  style="overflow:hidden; resize:none;">{{item.text}}

         </textarea>
		<textarea v-if="item.style==2" class="xx_li_neir" readonly
				  style="overflow:hidden; resize:none;">物品：{{item.text}}
		资金：{{item.danjia}}元
		</textarea>

	</div>

<!--	底部顶出技术支持信息-->
	<div style="height:110px;text-align:center;">
		<P>技术支持：©廊坊市鸿星志金网络科技有限公司®</P>
		<a href="http://WWW.5Q88.CN"><P>WWW.5Q88.CN</P></a>
	</div>
<!--底部导航栏-->
	<nav class="mui-bar mui-bar-tab">
		<a id="defaultTab" @click="juanzhu" class="newdd mui-tab-item " href="javascript:void(1)">
			<span class="mui-icon mui-icon-flag"></span>
			<span class="mui-tab-label">我要捐助</span>
		</a>
		<a class="newdd mui-tab-item"  @click="guanli"  href="javascript:void(1)">
			<span class="mui-icon mui-icon-list"><span class="mui-badge">{{wz_shz}}</span></span>
			<span class="mui-tab-label">名单管理</span>
		</a>
	</nav>
</div>
</body>
</html>
<script>
	var app=new Vue({
		el: "#app",
		data: {
			list:{$list},
			name:{$qy_name},
			zjsum:{$zjsum},
			wzsum:{$wzsum},
			wz_shz:{$wz_zsz}
		},
		methods: {
			////共计受捐次数
			gj_sj:function(){
				var t=this;
				if(t.list==null){
					return 0;
				}else{
					return t.list.length;
				}
			},
			guanli:function(){
				location.href='/index.php/admin';
			},
			juanzhu:function(){
				location.href='/index.php/index/index/wojuan.html';
			},
			autoTextAreaHeight: function () {
				var o = this.target;
				o.style.height = o.scrollTop + o.scrollHeight + "px";
			},
			// 时间转换
			sj_nyrhms:function(sjc){
				var d=new Date();
				d.setTime(sjc * 1000);
				var h=d.getHours();//小时0-23
				var m=d.getMinutes();//分钟0-59
				var y=d.getFullYear();//年
				var my=d.getMonth()+1;//月
				var t=d.getDate();//日
				var s=d.getSeconds()//秒
				if(h<10){
					h="0"+h;
				}
				if(m<10){
					m="0"+m;
				}
				var ttt=y+'-'+my+'-'+t+' '+h+':'+m;
				return ttt;
			}
		},
		mounted: function () {
			// $.each($("textarea"), function (i, n) {
			// 	$(n).css("height", n.scrollHeight + "px");
			// 	// alert(n.scrollHeight)
			// });

			///时钟显示
			function sz_xs(){
				var d=new Date();

				var h=d.getHours();//小时0-23
				var m=d.getMinutes();//分钟0-59
				var y=d.getFullYear();//年
				var my=d.getMonth()+1;//月
				var t=d.getDate();//日
				var s=d.getSeconds()//秒
				if(h<10){
					h="0"+h;
				}
				if(m<10){
					m="0"+m;
				}
				var ss=document.getElementById('sss');
				var tt=document.getElementById('t');
				var mmy=document.getElementById('my');
				var yer=document.getElementById('yer');
				var hh=document.getElementById('hhh');
				var mm=document.getElementById('mmm');
				ss.innerText=s;
				tt.innerText=t;
				mmy.innerText=my;
				yer.innerText=y;
				hh.innerText=h;
				mm.innerText=m;
				// console.log('a');
				$('.sj').css('opacity',1);
			}
			setInterval(sz_xs,1000);
		}


	});
</script>
